---
title: "Scroll Shadow"
description: "Applies top and bottom shadows when content overflows on scroll."
---

import {scrollShadowContent} from "@/content/components/scroll-shadow";

# Scroll Shadow

Applies top and bottom shadows when content overflows on scroll.

<ComponentLinks component="scroll-shadow" storybook="scrollshadow" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add scroll-shadow",
    npm: "npm install @heroui/scroll-shadow",
    yarn: "yarn add @heroui/scroll-shadow",
    pnpm: "pnpm add @heroui/scroll-shadow",
    bun: "bun add @heroui/scroll-shadow"
  }}
/>

## Import

<ImportTabs
  commands={{
    main: 'import {ScrollShadow} from "@heroui/react";',
    individual: 'import {ScrollShadow} from "@heroui/scroll-shadow";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={scrollShadowContent.usage} />

### Hide Scrollbar

You can use the `hideScrollBar` property to hide vertical and horizontal scrollbars.

<CodeDemo title="Hide Scrollbar" files={scrollShadowContent.hideScrollbar} />

### Custom Shadow Size

By default, the shadow size is `40` in pixels, but you can change it using the `size` property.

<CodeDemo title="Custom Shadow Size" files={scrollShadowContent.customSize} />

### Horizontal Orientation

In case you need to apply the shadow on the horizontal scroll, you can set the `orientation` property to `horizontal`.

<CodeDemo title="Horizontal Orientation" files={scrollShadowContent.horizontal} />

### Shadow Offset

By default the shadow offset is `0` in pixels, but you can change it using the `offset` property. This allows you to apply the shadow on
a specific position.

<CodeDemo title="Shadow Offset" files={scrollShadowContent.offset} />

<Spacer y={4} />

## API

### ScrollShadow Props

<APITable
  data={[
    {
      attribute: "size",
      type: "number",
      description: "The shadow size in pixels.",
      default: "40"
    },
    {
      attribute: "offset",
      type: "number", 
      description: "The scroll offset to show the shadow in pixels.",
      default: "0"
    },
    {
      attribute: "hideScrollBar",
      type: "boolean",
      description: "Whether to hide the scrollbar or not.",
      default: "false"
    },
    {
      attribute: "orientation",
      type: "horizontal | vertical",
      description: "The scroll orientation.",
      default: "vertical"
    },
    {
      attribute: "isEnabled",
      type: "boolean",
      description: "Whether the shadow is enabled or not.",
      default: "true"
    },
    {
      attribute: "visibility",
      type: "ScrollShadowVisibility",
      description: "The shadow visibility. (controlled)",
      default: "auto"
    }
  ]}
/>

### ScrollShadow Events

<APITable
  data={[
    {
      attribute: "onVisibilityChange",
      type: "(visibility: ScrollShadowVisibility) => void",
      description: "Callback invoked when the shadow visibility changes.",
      default: "-"
    }
  ]}
/>

<Spacer y={2} />

### Types

#### Scroll Shadow Visibility

```ts
type ScrollShadowVisibility = "auto" | "top" | "bottom" | "left" | "right" | "both" | "none";
```
